<!--
 * @Description: 基础平台
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-12 10:07:42
-->
<template>
  <div class="platform">
    <el-container :style="'height:' + (screenHeight - 115) + 'px;'">
      <div style="display: flex; width:100%;">
        <el-aside :style="style">
          <div></div>
        </el-aside>
        <div id="container">
          <!-- <keep-alive> -->
            <router-view v-if="$route.meta.keepAlive" />
          <!-- </keep-alive> -->
          <router-view v-if="!$route.meta.keepAlive" />
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
/* 引入组件*/
/* 引入scss里的变量*/
import { mapGetters } from "vuex";
//import addTab from '@/common/addTab.js';
export default {
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
    };
  },
  computed: {
    ...mapGetters({
      Collapse: "getsCollapse",
    }),
    style() {
      if (this.Collapse) {
        return (
          "transition: width 0.2s;width:102px;height:" +
          (this.screenHeight - 115) +
          "px;overflow-x: hidden;"
        );
      } else {
        return (
          "transition: width 0.2s;width:200px;height:" +
          (this.screenHeight - 115) +
          "px;overflow-x: hidden;"
        );
      }
    },
  },
  created() {
    this.screenWidth = this.onScreenWidth(document.documentElement.clientWidth);
    this.screenHeight = document.documentElement.clientHeight;
    this.$store.dispatch("ChangescreenWidth", this.screenWidth);
    this.$store.dispatch("ChangescreenHeight", this.screenHeight);
    window.onresize = () => {
      return (() => {
        this.screenWidth = this.onScreenWidth(
          document.documentElement.clientWidth
        );
        this.screenHeight = document.documentElement.clientHeight;
        this.$store.dispatch("ChangescreenWidth", this.screenWidth);
        this.$store.dispatch("ChangescreenHeight", this.screenHeight);
      })();
    };
  },
  methods: {
    onScreenWidth(Width) {
      if (Width < 1440) {
        return 1440;
      } else {
        return Width;
      }
    },
  },
};
</script>
